<template>
  <div class="introduction">
    <div class="self-left">
      <div class="myphoto">
        <el-upload
          class="avatar-uploader"
          :action="action"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img :src="userInfo.avatar" class="avatar" />
        </el-upload>
      </div>
      <div class="myname">
        <p>昵称： {{userInfo.nickname}}</p>
      </div>
      <el-menu
        :default-active="activeIndex"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        router
      >
        <el-menu-item index="/personal">
          <i class="el-icon-menu"></i>
          <span slot="title">个人信息</span>
        </el-menu-item>
        <el-submenu index="/collect">
          <template slot="title">
            <i class="el-icon-star-on"></i>
            <span>我的收藏</span>
          </template>
          <el-menu-item index="/collect/question">
            <i class="el-icon-notebook-2" /><span>题单</span>
          </el-menu-item>
          <el-menu-item index="/collect/talk">
            <i class="el-icon-edit-outline" /><span>讨论</span>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </div>

    <div class="self-right">
      <el-main>
        <router-view></router-view>
      </el-main>
    </div>
  </div>
</template>

<script>
import "@/assets/css/userinfo.css";

// 对象的定义方法
const defaultUserInfo = {
  id: null,
  username: null, //账号
  nickname: null, //别名
  password: null,
  avatar: null,
  email: null,
  phone: null,
  sex: null,
};

const vueUserInfo = {
  id: 1,
  username: "丫丫", //账号
  nickname: "小丫丫", //别名
  password: "1234567890",
  avatar: "https://yaling.oss-cn-shenzhen.aliyuncs.com/20211121/4.jpg",
  email: "19880030153@qq.com",
  phone: "19880030153",
  sex: 0,
};
export default {
  name: "userinfo",
  components: {},
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };

    return {
      userInfoForm: Object.assign({}, defaultUserInfo),
      userInfo: Object.assign({}, defaultUserInfo),
      isReadOnly: true, // 默认为true不能编辑,
      activeIndex: "/personal",
      action: "http://172.20.21.92:8084/" + "file/uploadFile",
    };
  },

  created() {
    this.getUserInfo();
  },
  methods: {
    handleUpdate() {
      console.log("handleUpdate");
      this.isReadOnly == !this.isReadOnly;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item);
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1);
      }
    },
    addDomain() {
      this.dynamicValidateForm.domains.push({
        value: "",
        key: Date.now(),
      });
    },
    getUserInfo() {
      this.userInfo = vueUserInfo;
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/png" || "image/jpg" || "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG/PNG/JPEG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>

<style></style>
